<template>
    <div class="good-info">
        <div class="good-info-title" style="font-weight: bold;">规格信息</div>
        <div class="table">
            <table>
                <tr>
                    <td class="title">商品编号</td>
                    <td class="info">{{ props.item._id }}</td>
                </tr>
                <tr>
                    <td class="title">品牌</td>
                    <td class="info">{{ props.item.brand }}</td>
                </tr>
                <tr>
                    <td class="title">规格</td>
                    <td class="info">{{ props.item.specif }}</td>
                </tr>
                <tr>
                    <td class="title">生产日期</td>
                    <td class="info">{{ formatCountdown(props.item.date) }} </td>
                </tr>
                <tr>
                    <td class="title">保质期</td>
                    <td class="info">{{ props.item.period }}个月</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
    item: Object
})

// console.log(props);


// 将日期字符串转换为年月日格式
const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// 在模板中调用 formatDate 函数
const formatCountdown = (countdown: string) => {
    return formatDate(countdown);
}

</script>

<style scoped lang="less">
.good-info {
    padding: .8rem 1rem;

    .table {
        width: 100%;
        padding: .8rem 0;

        table {
            width: 100%;
            tr {
                border: 1px solid #fff;

                .title {
                    font-size: .7936rem;
                    padding: .5rem;
                    width: 30%;
                    border: 1px solid #fff;
                    background-color: #f2f2f2;
                }

                .info {
                    font-size: .7936rem;
                    color: #9ea09e;
                    padding: .5rem;
                    width: 70%;
                    border: 1px solid #fff;
                    background-color: #f7f7f7;
                }
            }
        }
    }
}
</style>